<template>
	<view class="user-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="基本信息"></uni-navbar></view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<view v-show="!disabled">
					<!-- <u-form-item class="form-item" required label="登录名" prop="loginName">
						<u-input v-model="form.loginName" type="text" placeholder="请输入登录名" />
					</u-form-item> -->
					<u-form-item class="form-item" required label="姓名" prop="userName">
						<!-- block -->
						<u-input v-model="form.userName" type="text" placeholder="请输入姓名" />
					</u-form-item>
					<u-form-item class="form-item" label="性别">
						<u-input v-model="sex" type="select" :select-open="sexShow" placeholder="请选择性别" @click="sexShow = true" />
						<u-select :list="sexList" v-model="sexShow" @confirm="sexConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" label="手机号码">
						<!-- block -->
						<u-input v-model="form.phone" type="text" placeholder="请输入手机号码" />
					</u-form-item>
				</view>
				<view v-show="disabled">
					<!-- <u-form-item class="form-item" label="登录名">
						<view class="form-right">{{ form.loginName }}</view>
					</u-form-item> -->
					<u-form-item class="form-item" label="姓名">
						<view class="form-right">{{ form.userName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="性别">
						<view class="form-right">{{ form.sex }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="手机号码">
						<view class="form-right">{{ form.phone }}</view>
					</u-form-item>
				</view>
			</u-form>
		</view>

		<view class="uploader-add" @click="edit"><view>编辑</view></view>

		<view class="fiexd-btm" v-if="!disabled"><u-button class="form-btn" type="error" @click="confirm">保存</u-button></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			self: '',
			disabled: true,
			sex: '',
			sexShow: false,
			sexList: [
				{
					value: '男',
					label: '男'
				},
				{
					value: '女',
					label: '女'
				}
			],

			form: {
				id: '',
				clientCode: '',
				loginName: '',
				userName: '',
				sex: '',
				phone: ''
			},
			rules: {
				userName: [
					{
						required: true,
						message: '请输入姓名',
						trigger: 'change'
					}
				],
				loginName: [
					{
						required: true,
						message: '请选择登录名',
						trigger: 'change'
					}
				]
			}
		};
	},
	onLoad() {
		this.loadLogin();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				Object.keys(this.userInfo.sysUser).forEach((key) => (this.form[key] = this.userInfo.sysUser[key] || ''));
				// this.form.id = this.userInfo.sysUser.id;
				// this.form.loginName = this.userInfo.sysUser.loginName;
				// this.form.userName = this.userInfo.sysUser.userName;
				// this.form.sex = this.userInfo.sysUser.sex;
				// this.form.phone = this.userInfo.sysUser.phone;
				this.sex = this.form.sex;

				console.log(this.form);
			} else {
				this.$logout();
			}
		},
		sexConfirm(e) {
			this.sex = e[0].label;
			this.form.sex = e[0].value;
		},
		loadDict(type, list) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						value: item.dictValue,
						label: item.dictName
					});
				});
			});
		},
		edit() {
			if (this.userInfo.roleCodes.indexOf('sys_manager') != -1) {
				this.$msg('管理员不能修改个人信息！');
				return false;
			}
			this.disabled = !this.disabled;
			this.loadLogin();
		},
		confirm() {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					return false;
				} else {
					let data = {
						sysUser: this.form
					};

					this.$request('/system/sys-user/add', data, {
						load: true
					}).then((res) => {
						this.$msg(res.msg);
						this.disabled = !this.disabled;
						this.userInfo.sysUser = Object.assign(this.userInfo.sysUser, this.form);
						this.$store.commit('login', this.userInfo);
						this.loadLogin();
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.user-view {
	background-color: #fff;
}

.form-box {
	border-top: 20rpx solid $u-border-color;

	.form-item {
		@include mp-flex;
	}

	.form-right {
		width: 100%;
		text-align: right;
	}
}
.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
